<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>口罩识别</title>
</head>
<body>
	
	<div>
     	<input type="file" id="changeMore">
     	<button id="b01">识别</button>
     	<div id="comment">
     		<p id="match">识别：</p>
			<p id="mask">戴口罩：</p>
			<p id="unmask">未带口罩：</p>
		</div>
		<div id="picture">
             <img style="width: 500x;height: auto;border-radius: 5px" id="img" src="" alt="">
		</div>
    </div>
<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">	
$(document).ready(function(){
	 $("#changeMore").change(function(){
		 try{
			 $("#img").attr("src",URL.createObjectURL($(this)[0].files[0])); 
		 }catch(err){
			 console.log("请选择图片");
		 }
	});
	
	$("#b01").click(function(){		  
		var files = $("#changeMore")[0].files //获取上传的文件列表
		
		mask(files[0]);
	 	if(files.length!=1){
			alert("请上传图片");
			return;
		}
		var uploadFile=files[0];
		var filePath=uploadFile.name
		var index= filePath.lastIndexOf(".");
		//获取后缀
		var ext = filePath.substr(index+1);
		//文件大小
		var size=uploadFile.size;
		if(isAssetTypeAnImage(ext) && size<4000000){
			mask(files[0]);
		}else{
			alert("1,支持图片格式:png, jpg, jpeg, bmp;2图片大小小于4M");
		} 
	});
	
	
	function mask(file){
	    var formData = new FormData(); //新建一个formData对象
	    formData.append("file", file); //append()方法添加字段
		$.ajax({
             type: "POST",
             processData: false,//用于对data参数进行序列化处理 这里必须false
             contentType: false, //必须
             url: "/easydl/mask",
             data: formData,
             dataType: "json",
             success: function(data){
            	 if(data.results){
            		 success(data.results);
            	 }else{
            		 fail(data.error_msg);
            	 }
            	 //"error_code":336005,"error_msg":"Failed decoding input"
            	
             }
	    });
	}
	function success(results){
		 var length=results.length;
    	 var mask=0;
    	 var unmask=0;
    	 for(var i=0;i<length;i++){
    		 if(results[i].name=='mask'){
    			 mask+=1; 
    		 }else if(results[i].name=='unmask'){
    			 unmask+=1;
    		 }
    	 }
    	 console.log(mask);
    	 console.log(unmask);
    	 $("#match").html("识别："+length);
    	 $("#mask").html("戴口罩："+mask);
    	 $("#unmask").html("未戴口罩："+unmask);
         console.log("OK");
	}
	
	function fail(error_msg){
		alert(error_msg);
	}
	
	function isAssetTypeAnImage(ext) {
		  return ['png', 'jpg', 'jpeg', 'bmp'].indexOf(ext.toLowerCase()) !== -1;
	}
});
</script>
</body>
</html>